"use client";

import Link from "next/link";
import React, { useState } from "react";
import Image from "next/image";
import ShoppingItem from "@/components/ShoppingItem";
export default function Page() {
  const [shopping] = useState([1, 2]);
  const [news] = useState([1, 2, 3, 4]);
  return (
    <>
      <section className="bg-home-img-01  bg-center bg-[length:1920px_1525px] h-[1525px]  overflow-auto">
        <div className="w-[1200px]  mx-auto mt-[270px]">
          <Image
            src={"/assets/home/home-slogan.png"}
            className="relative z-10"
            alt=""
            width={560}
            height={130}
          ></Image>

          <div className="w-[567px] h-[6px] mt-7 bg-gradient-to-r from-[#E3B23B] to-[#E3B23B00]"></div>

          <div className="w-[241px] h-20 mt-[58px] bg-orange-600">运费估算</div>
          <div className="w-[241px] h-20 bg-orange-600 mt-7">运费估算</div>

          <div className="home-part__logo mt-[170px]">
            <Image
              src={"/assets/home/home-advantages.png"}
              className="relative z-10"
              alt=""
              width={130}
              height={40}
            ></Image>
            <Image
              src={"/assets/home/Our advantages.png"}
              alt=""
              className="relative z-10 "
              width={180}
              height={40}
            ></Image>
          </div>

          <ul className="flex gap-4 mt-[60px]">
            <li className="w-[360px] h-[360px] bg-home-advantage p-[36px]">
              <Image
                src={"/assets/home/fly.png"}
                className="mt-[52px]"
                alt=""
                width={140}
                height={70}
              ></Image>

              <Image
                src={"/assets/home/axzy.png"}
                className="mt-9"
                alt=""
                width={140}
                height={70}
              ></Image>
              <p className="leading-[30px] text-white text-[22px] font-bold mt-4">
                全渠道包税、纽约包机直发精准到0.1
              </p>
            </li>

            <li className="w-[152px] h-[360px] shadow-zskf rounded-[20px] bg-gradient-to-b from-[#E9EAFF] to-[#FFFFFF] flex flex-col justify-center items-center">
              <Image
                src={"/assets/home/zskf_icon.png"}
                className="mt-9"
                alt=""
                width={60}
                height={60}
              ></Image>
              <Image
                src={"/assets/home/zskf_label.png"}
                className="mt-5"
                alt=""
                width={110}
                height={30}
              ></Image>
            </li>
            <li className="w-[152px] h-[360px] shadow-zskf rounded-[20px] bg-gradient-to-b from-[#DBFFF3] to-[#FFFFFF] flex flex-col justify-center items-center">
              <Image
                src={"/assets/home/msdz_icon.png"}
                className="mt-9"
                alt=""
                width={60}
                height={60}
              ></Image>
              <Image
                src={"/assets/home/msdz_label.png"}
                className="mt-5"
                alt=""
                width={110}
                height={30}
              ></Image>
            </li>
            <li className="w-[152px] h-[360px] shadow-zskf rounded-[20px] bg-gradient-to-b from-[#F0FFE1] to-[#FFFFFF] flex flex-col justify-center items-center">
              <Image
                src={"/assets/home/aqbz_icon.png"}
                className="mt-9"
                alt=""
                width={60}
                height={60}
              ></Image>
              <Image
                src={"/assets/home/aqbz_label.png"}
                className="mt-5"
                alt=""
                width={110}
                height={30}
              ></Image>
            </li>
            <li className="w-[152px] h-[360px] shadow-zskf rounded-[20px] bg-gradient-to-b from-[#FFEFDA] to-[#FFFFFF] flex flex-col justify-center items-center">
              <Image
                src={"/assets/home/qssh_icon.png"}
                className="mt-9"
                alt=""
                width={60}
                height={60}
              ></Image>
              <Image
                src={"/assets/home/qssh_label.png"}
                className="mt-5"
                alt=""
                width={110}
                height={30}
              ></Image>
            </li>
            <li className="w-[152px] h-[360px] shadow-zskf rounded-[20px] bg-gradient-to-b from-[#FFE8FF] to-[#FFFFFF] flex flex-col justify-center items-center">
              <Image
                src={"/assets/home/tsfw_icon.png"}
                className="mt-9"
                alt=""
                width={60}
                height={60}
              ></Image>
              <Image
                src={"/assets/home/tsfw_label.png"}
                className="mt-5"
                alt=""
                width={110}
                height={30}
              ></Image>
            </li>
          </ul>
        </div>
      </section>
      {/* <section className="bg-bg_02 bg-center bg-[length:1920px_870px] h-[870px]" ></section>
      <section className="bg-bg_03 bg-center bg-[length:1920px_860px] h-[860px]" ></section> */}

      <section className="h-[870px] bg-home-img-02 bg-center bg-[length:1920px_870px] overflow-auto">
        <div className="w-[1200px]  mx-auto">
          <div className="home-part__logo mt-[80px]">
            <Image
              src={"/assets/home/home-tzgg.png"}
              className="relative z-10"
              alt=""
              width={130}
              height={40}
            ></Image>
            <Image
              src={"/assets/home/LATEST NEWS.png"}
              alt=""
              className="relative z-10 "
              width={180}
              height={40}
            ></Image>
          </div>

          <div>
            <ul className="flex flex-col items-end gap-5 mt-5">
              {news.map((item, index) => (
                <div
                  className="btn-hover w-[635px] h-[120px] rounded-[20px] bg-white p-5 flex items-center"
                  key={`news-${index}`}
                >
                  <span className="w-20 h-20 rounded-[20px] bg-[#CEE8FB] p-[15px]">
                    <Image
                      src={
                        index % 2 === 1
                          ? "/assets/home/news_01.png"
                          : "/assets/home/news_02.png"
                      }
                      alt=""
                      width={50}
                      height={50}
                    ></Image>
                  </span>

                  <div className="flex flex-col justify-center w-12 ml-6 mr-12">
                    <span className="text-[#333] text-6 font-medium">2025</span>
                    <span className="text-[#666] text-5 font-medium">
                      03-26
                    </span>
                  </div>

                  <p className="flex-auto text-[22px] leading-6 font-bold text-[#000033] h-12">
                    美国海淘全攻略:怎么买?怎么寄?如何省最多?
                  </p>
                </div>
              ))}
            </ul>
            <div className="flex justify-center mt-13">
              <button className="btn-more">更多 &gt;</button>
            </div>
          </div>
        </div>
      </section>
      <section className="h-[860px] bg-home-img-03 bg-center bg-[length:1920px_860px] overflow-auto">
        <div className="w-[1200px]  mx-auto">
          <div className="home-part__logo mt-[80px]">
            <Image
              src={"/assets/home/home-htgl.png"}
              className="relative z-10"
              alt=""
              width={130}
              height={40}
            ></Image>
            <Image
              src={"/assets/home/SHOPPING GUIDE.png"}
              alt=""
              className="relative z-10 "
              width={220}
              height={40}
            ></Image>
          </div>

          <ul className="flex gap-[30px] mt-[90px]">
            {shopping.map((item, index) => (

              <ShoppingItem key={`shop-${index}`} />
            ))}
          </ul>

          <button className="btn-more">更多 &gt;</button>
        </div>
      </section>
    </>
  );
}
